<template>
  <el-row v-loading="chartLoading" class="pie-row">
    <chart
      :option="commonHeatmapOption"
      ref="heatMapChart"
      auto-resize
      style="width: 100%; height: 100%"
    ></chart>
  </el-row>
</template>

<script>
import nt from '../../../../../network'
import parseApi from '../../../../utils/parseApi'

 import _ from 'lodash'
import mixinOption from '../../../../utils/mixinOption'

export default {
  name: 'custom-report-component-chart-heatmap',
  props: {
    api: {},
    method: {
      type: String,
      default: 'get',
    },
    dataKey: {},
    mainTitle: {},
    time: {},
    componentData: {},
    changeSize: {},
    changeData: {},
    interval: {},
    mixinParam: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      comInterval: 0,
      chartLoading: false,
      isDataReady: false,
      hours: [
        '12a',
        '1a',
        '2a',
        '3a',
        '4a',
        '5a',
        '6a',
        '7a',
        '8a',
        '9a',
        '10a',
        '11a',
        '12p',
        '1p',
        '2p',
        '3p',
        '4p',
        '5p',
        '6p',
        '7p',
        '8p',
        '9p',
        '10p',
        '11p',
      ],
      days: [
        'Saturday',
        'Friday',
        'Thursday',
        'Wednesday',
        'Tuesday',
        'Monday',
        'Sunday',
      ],

      option: {
        tooltip: {
          position: 'top',
        },
        animation: false,
        grid: {
          height: '70%',
          top: '10%',
          left: '50',
          right: '20',
        },
        xAxis: {
          show: true,
          type: 'category',
          data: ['1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a'],
          splitArea: {
            show: false,
          },
          axis: {
            show: true,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              fontFamily: 'PingFangSC-Regular',
              fontSize: '12',
              color: '#526476',
            },
          },
        },
        yAxis: {
          show: true,
          type: 'category',
          data: [
            'Saturday',
            'Friday',
            'Thursday',
            'Wednesday',
            'Tuesday',
            'Monday',
            'Sunday',
          ],
          splitArea: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              fontFamily: 'PingFangSC-Regular',
              fontSize: '12',
              color: '#526476',
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#F1F1F1'],
            },
          },
        },
        visualMap: {
          // type: 'continuous',
          min: 0,
          max: 10,
          calculable: true,
          itemWidth: '10', //图形的宽度，即长条的宽度
          itemHeight: '180', //图形的高度，即长条的高度
          orient: 'horizontal',
          type: 'piecewise',
          left: '55',
          bottom: '0',
          show: false,
          inRange: {
            color: [
              'rgba(37, 204, 168, 0.16)',
              'rgba(86, 164, 176, 0.63)',
              'rgba(86, 164, 176, 0.78)',
              'rgb(86, 164, 176)',
            ],
          },
        },
        series: [
          {
            name: 'Punch Card',
            type: 'heatmap',
            data: [],
            label: {
              show: true,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
      commonHeatmapOption: {},
    }
  },
  methods: {
    changeStyle: function () {
      let componentData = this.componentData
      let option = this.option
      option.grid = componentData.grid
      //  option.grid.height = componentData.height + '%'
      // option.visualMap.show=componentData.visualMap.show
      option.visualMap.inRange.color = componentData.color
      option.xAxis.show = componentData.xAxis.show
      option.xAxis.axisLabel.rotate = componentData.xRotate
      option.yAxis.axisLabel.rotate = componentData.yRotate
      option.xAxis.axisLine.show = componentData.xAxis.axis.show
      this.commonHeatmapOption = _.cloneDeep(option)
      if (componentData.code) {
        //给开发人员测试的，怕忘记删，生产环境就不打印了
        process.env.NODE_ENV === 'development' &&
          console.log(this.mainTitle + ' 混入前option', option)
        this.commonHeatmapOption = mixinOption(
          this.commonHeatmapOption,
          componentData.code
        )
        process.env.NODE_ENV === 'development' &&
          console.log(
            this.mainTitle + ' 混入后option',
            this.commonHeatmapOption
          )
      }
      if (this.$refs.heatMapChart) {
        this.$refs.heatMapChart.resize()
      }
    },
    getCommonData: function (callback, newApi) {
      this.chartLoading = true
      let parseData = (data) => {
        let xData = []
        let yData = []

        if (
          !data ||
          JSON.stringify(data) === '{}' ||
          !data.valueList ||
          !data.valueList.length
        ) {
          data = {
            valueList: [
              //纵轴数据
              {
                //每一项是每条线的数据
                name: '', //右上角tooltip展示和每条线鼠标悬浮展示字
                value: [
                  {
                    data: 0, //线上点高度
                    xname: '', //对应横坐标
                    yname: '', //对应纵坐标
                    unit: '', //单位
                  },
                ],
              },
            ],
          }
        }

        // if (data.valueList && data.valueList.length > 0) {
        let xDataMap = new Map()
        data.valueList[0].value.forEach((item) => {
          if (!xDataMap.get(item.xname)) {
            xDataMap.set(item.xname, item.xname)
            xData.push(item.xname.replace(/ /g, '\n'))
          }
        })
        let yDataMap = new Map()
        data.valueList[0].value.forEach((item) => {
          if (!yDataMap.get(item.yname)) {
            yDataMap.set(item.yname, item.yname)
            yData.push(item.yname.replace(/ /g, '\n'))
          }
        })
        let valueList = data.valueList
        let option = this.option
        option.xAxis.data = xData
        option.series = valueList.map((item) => ({
          name: item.name,
          type: 'heatmap',
          data: item.value.map((item) => [item.xname, item.yname, item.data]),
          label: {
            show: true,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        }))
        //确定最大值范围
        let maxData = 0
        valueList[0].value.forEach((item) => {
          if (item.data > maxData) {
            maxData = item.data
          }
        })
        option.visualMap.max = maxData
        option.yAxis.data = yData
        // }
        this.chartLoading = false
        if (!this.isDataReady) {
          this.isDataReady = true
          this.$emit( 'dataReady')
        }
      }
      if (!this.api || !this.api.reqUrl) {
        let data = {
          valueList: [
            //纵轴数据
            {
              //每一项是每条线的数据
              name: '邮件营销', //右上角tooltip展示和每条线鼠标悬浮展示字
              value: [
                {
                  data: 120, //线上点高度
                  xname: 'x1', //对应横坐标
                  yname: 'y1', //对应纵坐标
                  unit: '个', //单位
                },
                {
                  data: 30, //线上点高度
                  xname: 'x1', //对应横坐标
                  yname: 'y2', //对应纵坐标
                  unit: '个', //单位
                },
                {
                  data: 110, //线上点高度
                  xname: 'x2', //对应横坐标
                  yname: 'y3', //对应纵坐标
                  unit: '个', //单位
                },
                {
                  data: 20, //线上点高度
                  xname: 'x3', //对应横坐标
                  yname: 'y3', //对应纵坐标
                  unit: '个', //单位
                },
                {
                  data: 50, //线上点高度
                  xname: 'x4', //对应横坐标
                  yname: 'y4', //对应纵坐标
                  unit: '个', //单位
                },
                {
                  data: 40, //线上点高度
                  xname: 'x5', //对应横坐标
                  yname: 'y5', //对应纵坐标
                  unit: '个', //单位
                },
              ],
            },
          ],
        }
        parseData(data)
        if (callback) {
          callback()
        }
      } else {
        nt.doRequest({
          method: 'post',
          uri: '/paas/chart-layout/v1/compdsconfig/testCompDSConfig',
          data: parseApi({
            api: this.api,
            time: this.time,
            mixinParam: this.mixinParam,
          }),
          onSuccess: (resp) => {
            let data = resp.data.content.content
            parseData(data)
            if (callback) {
              callback()
            }
          },
          onError: () => {
            parseData({})
            if (callback) {
              callback()
            }
          },
        })
      }
    },
    changeParam() {
      if (this.api) {
        this.getCommonData(this.changeStyle)
        clearInterval(this.comInterval)
        if (this.interval) {
          this.comInterval = setInterval(() => {
            this.getCommonData(this.changeStyle)
          }, this.interval * 1000)
        }
      }
    },
  },
  watch: {
    'api.dsName': function () {
      this.getCommonData()
    },
    componentData() {
      this.changeStyle()
    },
    changeSize() {
      this.$refs.heatMapChart.resize()
    },
    time() {
      this.changeParam()
    },
    mixinParam: {
      handler: function (val, oldVal) {
        let int = 0
        int = setInterval(() => {
          if (!this.chartLoading) {
            clearInterval(int)
            this.changeParam()
          }
        }, 50)
      },
      deep: true,
    },
  },
  created: function () {
    this.getCommonData(this.changeStyle)
    if (this.interval) {
      this.comInterval = setInterval(() => {
        this.getCommonData(this.changeStyle)
      }, this.interval * 1000)
    }
  },
  beforeDestroy() {
    clearInterval(this.comInterval)
  },
  emits: ['dataReady'],
}
</script>

<style scoped>
.chart-box {
  width: 100%;
  height: 100%;
  position: relative;
}
.pie-row {
  width: 100%;
  height: 100%;
}
</style>
